<template>
  <div class="spike-wrapper">
    <van-tabs v-model="active">
      <van-tab title="正在疯抢"></van-tab>
      <van-tab title="即将开抢"></van-tab>
      <van-tab title="明日预告"></van-tab>
    </van-tabs>
    <div class="scroll-wrapper">
      <scroll class="goods-scroll">
        <div class="seckill-content">
          <div class="title">{{startTitle}}正在疯抢</div>
          <div class="count-down">
            <span>距结束</span>
            <count-down
              class="count"
              v-on:end_callback="countDownE_cb(1)"
              :currentTime="currentTime"
              :startTime="currentTime"
              :endTime="endTime"
              :tipText="'距离开始文字1'"
              :tipTextEnd="'距离结束文字1'"
              :endText="'结束自定义文字2'"
              :dayTxt="'天'"
              :hourTxt="':'"
              :minutesTxt="':'"
              :secondsTxt="''"
            ></count-down>
          </div>
          <goods-list :seckillGoods="seckillGoods"></goods-list>
        </div>
      </scroll>
    </div>
  </div>
</template>

<script>
import goodsList from "./children/goodsList";
import scroll from "../../common/scroll";
import axios from "axios";
import CountDown from "vue2-countdown";
export default {
  components: {
    goodsList,
    scroll,
    CountDown
  },
  data() {
    return {
      active: 0,
      seckillGoods: null,
      currentTime: 1,
      startTime: 1,
      endTime: 1
    };
  },
  computed: {
    startTitle() {
      let date = new Date(this.startTime * 1000);
      let str = date.getHours() + ":00";
      return str;
    }
  },
  methods: {
    countDownE_cb: function(x) {
      this.initData();
    },
    initData() {
      axios
        .get(
          "/api/spike/v4/list/ongoing?type=1&page=3&size=40&list_id=spike_mR14Ht"
        )
        .then(res => {
          this.seckillGoods = res.data.items;
          this.currentTime = res.data.server_time;
          this.startTime = res.data.times[0];
          this.endTime = res.data.times[1];
        });
    }
  },
  created() {
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.scroll-wrapper {
  position: fixed;
  top: 0.44rem;
  left: 0;
  right: 0;
  bottom: 0;
  .goods-scroll {
    height: 100%;
    overflow: hidden;
  }
}
.seckill-content {
  background-color: #fff;
  padding-top: 0.14rem;
  .title {
    font-size: 0.19rem;
    height: 0.26rem;
    margin-bottom: 0.05rem;
    color: #e02e24;
    padding-left: 0.1rem;
    font-weight: 700;
    text-align: center;
  }
  .count-down {
    display: flex;
    justify-content: center;
    height: 0.18rem;
    color: #000;
    line-height: 0.18rem;
    font-size: 0.13rem;
  }
}
</style>
<style lang="less">
.count {
  margin-left: 0.05rem;
  p {
    span {
      font-size: 0.13rem;
      background-color: #383838;
      color: #fff;
      width: 0.23rem;
      letter-spacing: 0.01rem;
      padding-left: 0.02rem;
      border-radius: 0.02rem;
      padding-top: 0.005rem;
      font-weight: 700;
      padding: 0.02rem;
    }
  }
}
</style>

